<template>
  <view class="content">
    <view class="jnpeixun">
      <image src="../../static/jnpeixun.png" style="width: 750rpx;height: 240rpx;"></image>
    </view>
    <!--文章区域 开始-->
    <view v-for="(item, index) in goodsList" :key="item.id">
      <view class="webzhang_area" @click="jumpDeatil(item.id,imgPrex+item.url)">
        <videw class="webzhang_img">
          <image :src="imgPrex+item.url" style="width: 100%;height: 100%; border-radius: 10rpx;"></image>
        </videw>
        <videw class="webzhang_desc">
          <view class="webzhang_title">{{ item.title }}</view>
          <view class="webzhang_zan">
            <view>阅读{{ item.userRead }}</view>
            <view style="width: 16rpx;height: 30rpx;">
              <image src="../../static/right_jian.png" style="width: 100%;height: 100%;"></image>
            </view>
          </view>
        </videw>
      </view>
    </view>
    <!--文章区域 结束-->
  </view>
</template>

<script>
import config from '../../utils/config.js'
import request from '../../utils/request.js'

export default {
  data() {
    return {
      showOverlay: false, // 控制遮罩层显示的变量,
      goodsList: [],
      imgPrex: config.imgPrefx,
      search: ''
    }
  },
  created() {
    this.queryList();
  },
  onShareAppMessage(res) {
    let pages = getCurrentPages(); //获取当前页面栈的信息
    let currentPage = pages[pages.length - 1]; //获取到当前页面栈中最后一个页面的索引
      if (res.from === 'button') {// 来自页面内分享按钮
        console.log(res.target)
      }
      return {
        title: '逐金污师丨成人情趣甄选好物',
        path: currentPage.route + `?id=${this.id}&share=${this.share}` //后面是路径上要传递的参数
      }
    },
	onShareTimeline(res) {
	  let pages = getCurrentPages(); //获取当前页面栈的信息
	  let currentPage = pages[pages.length - 1]; //获取到当前页面栈中最后一个页面的索引
	    if (res.from === 'button') {// 来自页面内分享按钮
	      console.log(res.target)
	    }
	    return {
	      title: '逐金污师丨成人情趣甄选好物',
	      path: currentPage.route + `?id=${this.id}&share=${this.share}` //后面是路径上要传递的参数
	    }
	  },
  methods: {
    queryList() {
      let _this = this;
      request({
        url: '/app/v1/wenzhang/list',
        method: "POST",
        data: {
          channel: '2'
        },
      }).then(res => {
        if (200 == res.code) {
          _this.goodsList = res.data;
          //console.info(goodsList)
        } else {
          console.error('查询文章列表失败');
        }
      })
    },
    jumpDeatil(id,url) {
      uni.navigateTo({
        url: "/pages/wenzhang/wenzhang?id=" + id +"&url="+url
      })
    },
  }
}
</script>
<style>
/** 设置整个页面的背景色为白色 **/
page {
  background-color: #fff;
}


.webzhang_area {
  /** border: solid 1rpx red;**/
  width: 700rpx;
  height: 194rpx;
  border-radius: 10rpx;
  margin-top: 20rpx;
  margin-left: 20rpx;
  margin-right: 20rpx;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background-color: white;
}

.webzhang_img {
  /** border: solid 1rpx blue; **/
  width: 214rpx;
  height: 144rpx;
  background-size: cover;
  background-position: center; /* 可选，确保图片居中显示 */
  background-repeat: no-repeat; /* 防止背景图片重复 */
  background-image: url("https://zhujinhui.top/ss/zhujinhui/minis/wenzhang_bg.png");
  /** background-color: antiquewhite;**/
}

.webzhang_desc {
  height: 160rpx;
  width: 450rpx;
  margin-left: 20rpx;
  border-radius: 4rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: flex-start;
}

.webzhang_title {
  font-size: 32rpx;
}

.webzhang_zan {
  font-size: 24rpx;
  color: #d1d1d1;
  /**border: solid 1rpx blue;**/
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 26rpx;
  width: 400rpx;
}
</style>
